<!DOCTYPE html>
<html>

<head>
  <meta charset='UTF-8'>
  <title>个人经历</title>
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="./css/index.css">



</head>

<body>



  <div class="container" id="app">
    <!-- ------------------------ 头部 ------------------------ -->
    <header>
      <h1 class="project-name">{{datas.other.title}}</h1>
      <p>{{datas.other.text}}</p>
    </header>

    <!-- ------------ 时间线 ------------ -->
    <main id="timeline">
      <!-- ------- 模块 start------- -->
      <!-- 标题 -->
      <div class=" year-title">
        <h2>{{datas.chusheng.title}}</h2>
      </div>
      <!-- 内容 -->
      <div class="timeline-item" v-for="(item, index) in datas.chusheng.data" :key="index">
        <div class="timeline-content">
          <h3>{{item.time}}</h3>
          <p>{{item.text}}</p>
          <p><span>{{item.note}}</span></p>
        </div>
      </div>
      <!-- ------- 模块 end------- -->
      <!-- ------- 模块 start------- -->
      <div class=" year-title">
        <h2>{{datas.shangxue.title}}</h2>
      </div>
      <!-- 内容 -->
      <div class="timeline-item" v-for="(item, index) in datas.shangxue.data" :key="index">
        <div class="timeline-content">
          <h3>{{item.time}}</h3>
          <p>{{item.text}}</p>
          <p><span>{{item.note}}</span></p>
        </div>
      </div>
      <!-- ------- 模块 end------- -->
      <!-- ------- 模块 start------- -->
      <div class=" year-title">
        <h2>{{datas.budui.title}}</h2>
      </div>
      <!-- 内容 -->
      <div class="timeline-item" v-for="(item, index) in datas.budui.data" :key="index">
        <div class="timeline-content">
          <h3>{{item.time}}</h3>
          <p>{{item.text}}</p>
          <p><span>{{item.note}}</span></p>
        </div>
      </div>
      <!-- ------- 模块 end------- -->

      <!-- ------- 模块 start------- -->
      <div class=" year-title">
        <h2>{{datas.daxue.title}}</h2>
      </div>
      <!-- 内容 -->
      <div class="timeline-item" v-for="(item, index) in datas.daxue.data" :key="index">
        <div class="timeline-content">
          <h3>{{item.time}}</h3>
          <p>{{item.text}}</p>
          <p><span>{{item.note}}</span></p>
        </div>
      </div>
      <!-- ------- 模块 end------- -->

      <!-- ------- 模块 start------- -->
      <div class=" year-title">
        <h2>{{datas.gongzuo.title}}</h2>
      </div>
      <!-- 内容 -->
      <div class="timeline-item" v-for="(item, index) in datas.gongzuo.data" :key="index">
        <div class="timeline-content">
          <h3>{{item.time}}</h3>
          <p>{{item.text}}</p>
          <p><span>{{item.note}}</span></p>
        </div>
      </div>
      <!-- ------- 模块 end------- -->

      <!-- ------- 模块 start------- -->
      <div class=" year-title">
        <h2>{{datas.aa.title}}</h2>
      </div>
      <!-- 内容 -->
      <div class="timeline-item" v-for="(item, index) in datas.aa.data" :key="index">
        <div class="timeline-content">
          <h3>{{item.time}}</h3>
          <p>{{item.text}}</p>
          <p><span>{{item.note}}</span></p>
        </div>
      </div>

      <!-- ------- 模块 end------- -->






    </main>

    <footer class="resume-foot">
      <ul>
        <li>&copy;</li>
        <!-- <li><a href="//bealei.com">bealei</a></li>
        <li>by</li> -->
        <li><a href="//zhuanglei.top">zhuanglei</a></li>
      </ul>
    </footer>


  </div>

  <script src="./js/vue.global-3.3.3.min.js"></script>
  <script src="./js/datajson.js"></script>

  <script type="text/javascript">
    const { createApp, ref } = Vue
    createApp({
      data() {
        return {
          datas: res.content,
        }
      },
      methods: {
        // 展示小学初中高中
        shuangji() {

          console.log("this.page: " + this.datas)
        }
      }

    }).mount('#app')
  </script>




</body>

</html>